<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>更新页面</title>
        <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
        <link rel="stylesheet" href="/app/admin/component/jsoneditor/css/jsoneditor.css" />
        <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
        <style>
            table thead tr{
                background-color: #f2f2f2;
            }
            table tbody .layui-table-cell{
                height: 50px;
                position: relative;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>

        <form class="layui-form">

            <div class="mainBox">
                <div class="main-container mr-5">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="plan_name" placeholder="" lay-verify="required" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">针对等级</label>
                        <div class="layui-input-block">
                            <input type="radio" name="agent_level" value="1" title="V1" checked>
                            <input type="radio" name="agent_level" value="2" title="V2">
                            <input type="radio" name="agent_level" value="3" title="V3">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">是否审核</label>
                        <div class="layui-input-block">
                            <input type="radio" name="is_check" value="0" title="否" checked>
                            <input type="radio" name="is_check" value="1" title="是" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">奖励策略</label>
                        <div class="layui-input-block">
                            <table class="layui-hide" id="currentTableIdAttr" lay-filter="currentTableIdAttr"></table>
                        </div>
                    </div>
                    
                </div>
            </div>

            <div class="bottom">
                <div class="button-container">
                    <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
                        提交
                    </button>
                    <!--<button type="reset" class="pear-btn pear-btn-md">-->
                        <!--重置-->
                    <!--</button>-->
                </div>
            </div>
            
        </form>

        <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
        <script src="/app/admin/component/pear/pear.js"></script>
        <script src="/app/admin/component/jsoneditor/jsoneditor.js"></script>
        <script src="/app/admin/admin/js/permission.js"></script>
        <script src="/app/admin/admin/js/functions.js"></script>
        <script src="/app/admin/admin/js/md5.js"></script>
        
        <script>
            let table;
            let level_reward_data = [];

            // 相关接口
            const PRIMARY_KEY = "id";
            const PRIMARY_KEY_VALUE = layui.url().search[PRIMARY_KEY];
            const SELECT_API = "/app/admin/reward/index/select" + location.search;
            const UPDATE_API = "/app/admin/reward/index/update";


            // 获取数据库记录
            layui.use(["form", "util", "popup"], function () {
                $ = layui.$;
                $.ajax({
                    url: SELECT_API,
                    dataType: "json",
                    async:true,
                    headers: get_header({"id":PRIMARY_KEY_VALUE}),
                    success: function (res) {
                        
                        // 给表单初始化数据
                        layui.each(res.data[0], function (key, value) {
                            let obj = $('*[name="'+key+'"]');
                            if (key === "password") {
                                obj.attr("placeholder", "不更新密码请留空");
                                return;
                            }

                            if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;

                            if (obj[0].nodeName.toLowerCase() === "textarea") {
                                obj.val(value);
                            } else if ($(obj[0]).attr('type').toLowerCase() === "radio") {
                                $('input[name="'+key+'"]').each(function (i,v) {
                                    if(value==$(this).val()){
                                        $(this).attr("checked","checked");
                                    }else{
                                        $(this).removeAttr("checked");
                                    }
                                })
                            } else {
                                obj.attr("value", value);
                                obj[0].value = value;
                            }
                        });

                        level_reward_data = res.data[0].level_reward_data;
                        layui.use(["table", "form", "common", "popup", "util"], function() {
                            table = layui.table;
                            table_render();

                        });

                        // ajax返回失败
                        if (res.code) {
                            layui.popup.failure(res.msg);
                        }

                        layui.form.render();
                    }
                });

            });

            //提交事件
            layui.use(["form", "popup"], function () {
                // 字段验证允许为空
                layui.form.verify({
                    phone: [/(^$)|^1\d{10}$/, "请输入正确的手机号"],
                    email: [/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"],
                    url: [/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "链接格式不正确"],
                    number: [/(^$)|^\d+$/,'只能填写数字'],
                    date: [/(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, "日期格式不正确"],
                    identity: [/(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"]
                });
                layui.form.on("submit(save)", function (data) {
                    data.field[PRIMARY_KEY] = layui.url().search[PRIMARY_KEY];
                    data.field['level_reward_data'] = level_reward_data
                    layui.$.ajax({
                        url: UPDATE_API,
                        type: "POST",
                        dateType: "json",
                        data: data.field,
                        async:true,
                        headers: get_header(data.field),
                        success: function (res) {
                            if (res.code) {
                                return layui.popup.failure(res.msg);
                            }
                            return layui.popup.success("操作成功", function () {
                                parent.refreshTable();
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                            });
                        }
                    });
                    return false;
                });
            });
            window.table_render = function() {
                //表格渲染
                table.render({
                    elem: '#currentTableIdAttr'
                    //, toolbar: '#toolbarAttr'
                    , title: '列表'
                    , text: {
                        none: '暂无相关数据'
                    }
                    //, width:950
                    , defaultToolbar: []
                    , cols: [[ //表头
                        {field: 'user_level', title: '达人级别', width: 100}
                        , {field: 'talent_rate', title: '达人比例',templet: function (d) {
                                return ' <input type="number" name="talent_rate" value="' + d.talent_rate + '" data-level="'+d.user_level+'" data-name="talent_rate" onchange="change_value(this)" class="layui-input">';
                            }}

                        , {field: 'level1_v1', title: '直推V1', width: 120,templet: function (d) {
                                return ' <input type="number" name="level1_v1" value="' + d.level1_v1 + '" data-level="'+d.user_level+'" data-name="level1_v1" onchange="change_value(this)" class="layui-input">';
                            }}
                        , {field: 'level1_v2', title: '直推V2', width: 120,templet: function (d) {
                                return ' <input type="number" name="level1_v2" value="' + d.level1_v2 + '" data-level="'+d.user_level+'" data-name="level1_v2" onchange="change_value(this)" class="layui-input">';
                            }}
                        , {field: 'level1_v3', title: '直推V3', width: 120,templet: function (d) {
                                return ' <input type="number" name="level1_v3" value="' + d.level1_v3 + '" data-level="'+d.user_level+'" data-name="level1_v3" onchange="change_value(this)" class="layui-input">';
                            }}
                    ]]
                    , data: level_reward_data
                    , limit: 10
                });
            }

            window.change_value = function($this) {
                var level = $($this).data('level');
                var name = $($this).data('name');
                var value = $($this).val();

                $.each(level_reward_data,function (i,v) {
                    if(v!=undefined && level==v.user_level){
                        if(name=='talent_rate'){
                            level_reward_data[i].talent_rate = value;
                        }else if(name=='level1_v1'){
                            level_reward_data[i].level1_v1 = value;
                        }else if(name=='level1_v2'){
                            level_reward_data[i].level1_v2 = value;
                        }else if(name=='level1_v3'){
                            level_reward_data[i].level1_v3 = value;
                        }
                    }
                })
                table_render();
            }
        </script>

    </body>

</html>
